//引入公共样式
require('../../assets/css/index.less')

//引入当前样式
require('./home.less')

//引入swiper的css
require('swiper/dist/css/swiper.min.css')


//引入dom.js
const dom = require('../../utils/dom.js')


//引入swiper
const mySwiper = require('swiper')

//获取axios工具函数
const request = require('../../utils/request')

//引入foot渲染函数
const renderFoot = require('../../utils/foot.js')

window.onload = () => {
    //渲染foot
    renderFoot('home')

    //使用swiper
    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 2000, //可选选项，自动滑动
        initialSlide: 0,
        // effect: 'fade',
        // direction: 'vertical',
        pagination: '.swiper-pagination', //分页器
        loop: true, //无限循环
    })

    //获取打卡信息
    function getClockInfo() {
        request.get('/api/user/clockInInfo').then(res => {
            //解构数据
            let { errno, data } = res.data
                //判断
            if (errno === 0) {
                console.log('data.isClockIn :>> ', data.isClockIn)
                if (data.isClockIn) {
                    dom.$('#clock').textContent = '已打卡'
                    dom.$('#clock').className = 'clocked'
                } else {
                    dom.$('#clock').textContent = '今日打卡'
                    dom.$('#clock').className = 'clock'
                }
            }
        })
    }

    //初始化调用一次
    getClockInfo()

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data
                //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data)
            }
        })
    }

    //渲染函数 渲染dom更新dom
    function render(data) {
        dom.$('#rankNo').textContent = data.ranking
        dom.$('#clockDay').textContent = data.clockCount
        dom.$('#badge').textContent = data.badges
    }

    //初始化调用一次
    getUserInfo()

    //点击打卡
    dom.$('#clock').addEventListener('click', () => {
        request.post('/api/user/clockIn').then(res => {
            console.log('res.data :>> ', res.data)
                //解构数据
            let { errno, message } = res.data
                //判断
            if (errno === 0) {
                //打卡成功 重新请求数据 自动渲染
                getUserInfo()
                getClockInfo()
            } else {
                alert(message)
            }
        })
    })
}